<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>h5自定义属性</title>
</head>
<body>
    <!-- 自定义属性目的：是为了保存并使用数据 有些数据可以保存到页面中而不用保存到数据库中
                   自定义属性可以通过 getAttribute('属性')获取  

                   设置H5自定义属性
                                 H5规定自定义属性 data- 开头作为属性名并赋值
                                 比如 <div data-index="1"></div>

                   获取自定义属性的值
                                    兼容性获取  element.getAttribute('data-index');
                                    H5新增 element.dataset.index  或者 element.dataset['index']  ie11才开始支持 -->

                   <div getTime="20"  data-index="2"  data-list-name="andy"></div>
            <script>
                var div = document.querySelector('div');
                console.log(div.getAttribute('getTime'));   
                // 用js设置
                div.setAttribute('data-time',20)

                // 兼容性获取
                console.log(div.getAttribute('data-index'));
                console.log(div.getAttribute('data-list-name '));
                // H5 新增的获取自定义属性的方法
                // dataset 是一个集合 里面存放了所有以 data开头的自定义属性 
                console.log(div.dataset);
                console.log(div.dataset.index);
                console.log(div.dataset['index']);
                // 如果自定义属性里面有多个 - 链接的单词，我们采取 驼峰命名法
                console.log(div.dataset.listName);  //注意这里的写法
                console.log(div.dataset['listName']);
            </script>
</body>
</html>